<template>
  <a-modal
    hide-cancel
    :mask-closable="false"
    v-model:visible="centerDialogVisible"
    center
    align-center
    class="mine-diaolog-container"
  >
    <template #title>
      <slot name="title"></slot>
    </template>
    <div class="confirm-diaolog-content">
      <slot> </slot>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <a-button @click="centerDialogVisible = false">取消</a-button>
        <a-button :loading="loading" type="primary" @click="handleConfirm"> {{ props.confirmText }} </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, defineExpose, defineEmits } from 'vue'

const props = defineProps({
  confirmText: {
    type: String,
    default: '确认'
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['confirm', 'setLoading'])
const centerDialogVisible = ref(false)
const settingVisible = (flag = true) => {
  emit('setLoading', false)
  centerDialogVisible.value = flag
}
const handleConfirm = () => {
  emit('confirm')
}
defineExpose({
  settingVisible
})
</script>
<style lang="scss">
.mine-diaolog-container .arco-modal {
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #606166 !important;
  line-height: 24px !important;
  text-align: center !important;
  width: 464px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  box-shadow: 3px 6px 12px 1px rgba(8, 52, 128, 0.08) !important;
  border-radius: 12px !important;
  .arco-modal-header {
    text-align: center;
    border: none;
    .arco-modal-title {
      font-weight: bold;
      font-size: 16px;
      color: #2e2f33;
    }
  }
  .arco-modal-footer {
    border: none;
  }
  .confirm-diaolog-content {
    width: 100%;
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    font-weight: 400;
    font-size: 14px;
    color: #606166;
    line-height: 24px;
    text-align: center;
    box-sizing: border-box;
  }
  .arco-btn {
    border: none;
    background: none;
    font-weight: bold;
    font-size: 14px;
    color: #2e2f33;
  }
  .arco-btn-primary {
    box-shadow: 1px 2px 4px 1px rgba(69, 96, 230, 0.24);
    border-radius: 8px 8px 8px 8px;
    border: 2px solid #4560e6;
    color: #4560e6;
  }
}
</style>
